
import React from 'react';
import { ShopApi } from 'js/api/shop';
import { Link } from 'react-router';
import { Icon } from 'antd-mobile';

import './shoplist.scss';

const ShopList = React.createClass({
    getInitialState() {
        return { data: null }
    },
    componentDidMount() {
        ShopApi.getShopList({ key: '' }, (data) => {
            this.setState({ data: data })
        });
    },
    render() {
        let node;
        if (this.state.data) {
            node = this.state.data.map((item) => {
                return <Link className="item" to={'flowSummary/' + item.SHOPID} key={item.SHOPID}>
                    <img src={item.SHOPIMG} />
                    <div className="flex bottom">
                        <div className="flex-col-1 flex-center">
                            <i className="icon-little-shops"></i>
                        </div>
                        <div className="flex-g-1">{item.SHOPNAME}</div>
                        <div>{item.CITYNAME}</div>
                    </div>
                </Link>
            })
        } else {
            node = <div id="loading" className="flex-center" ><Icon type="loading" size={'md'} /></div>
        }

        return (
            <div id="shopList">
                {node}
            </div>
        );
    }
})

module.exports = ShopList;